<template>
  <div class="box tag">
    <dl class="first-tag">
      <dt>题材:</dt>
      <dd v-for="(item,index) in tags" :key="index">
        <a :class="item.id==activeTag?'active':''" @click="query(0,item.id)">{{item.udxName}}</a>
      </dd>
    </dl>
    <hr style="background:#eee" />

    <dl>
      <dt>进度:</dt>
      <dd v-for="(item,index) in updateStatus" :key="index">
        <a :class="item.id==activeUpdate?'active':''" @click="query(1,item.id)">{{item.udxName}}</a>
      </dd>
    </dl>

    <dl>
      <dt>面向:</dt>
      <dd v-for="(item,index) in face" :key="index">
        <a :class="item.id==activeFace?'active':''" @click="query(2,item.id)">{{item.udxName}}</a>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  props:['list'],
 
  created(){
    
      this.tags  = this.tags.concat(this.list);
      console.log(this.tags)
    
    
  },
  data() {
    return {
      tags: [
        {
          id: -1,
          udxName: "全部"
        }
      ],
      face: [
        {
          id: -1,
          udxName: "全部"
        },
        {
          id: 0,
          udxName: "少女"
        },
        {
          id: 1,
          udxName: "少男"
        },
        {
          id: 2,
          udxName: "乙女"
        }
      ],
      updateStatus: [
        {
          id: -1,
          udxName: "全部"
        },
        {
          id: 0,
          udxName: "连载"
        },
        {
          id: "1",
          udxName: "完结"
        }
      ]
    };
  },
  computed: {
    activeTag() {
      return this.$store.state.search.active.tag;
    },
    activeUpdate() {
      return this.$store.state.search.active.update;
    },
    activeFace() {
      return this.$store.state.search.active.face;
    }
  },
  methods: {
    selectItems(idx) {},
    query(index, id) {
      index == 0
        ? this.$store.commit("search/tag", id)
        : index == 1
        ? this.$store.commit("search/update", id)
        : this.$store.commit("search/face", id);
    }
  }
};
</script>

<style scoped>
.el-form-item {
  display: flex;

  align-items: center;
}
element.style {
  margin: 0 0 !important;
}
.el-form {
  background: white;
  padding: 0 20px;
}

.search-item {
  list-style: none;
}
.search-item li {
  float: left;
  margin-left: 20px;
}
.box dl {
  display: flex;
}
.tag {
  font-size: 14px;
}

.tag a {
  text-decoration: none;
  cursor: pointer;
}

.active {
  padding: 2px 6px;
  font-size: 10px;
  background: red;
  color: white;
  border-radius: 50%;
}
</style>